<!--
 * @Author: wangc
 * @Date: 2020-08-23 10:14:13
 * @LastEditTime: 2020-08-30 16:37:53
 * @Description: 
-->
<template>
    <div id="search">
        <el-autocomplete
      class="inline-input"
      v-model="input"
      :fetch-suggestions="querySearch"
      placeholder="请输入内容"
      @select="handleSelect"
    ></el-autocomplete>
        <el-button type="primary" @click="searchData">查询</el-button>
         <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
    </div>
</template>
<script>
import {getDataByNameKey} from "../../api/interface"
export default {
    data(){
        return {
            input:"",
            tableData:[{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
    },
    methods:{
        /**根据关键字来搜索数据 */
        searchData(){
            if(!this.input){
                return;
            }
            getDataByNameKey(this.input).then(res=>{
                let data = res.data;
                let tableData = [];
                data.forEach(item=>{
                    tableData.push({
                        date: '2016-05-02',
                        name:item.name,
                        address:item.address,
                    })
                })
                this.tableData = tableData;
                /**下面记录搜索的历史记录 */
                let text = "historySearch"
                if(JSON.parse(localStorage.getItem(text))) {  // 判断是否已有xxx查询记录的localStorage
                    // 判断是否已有此条查询记录，若已存在，则不需再存储
                    let result = JSON.parse(localStorage.getItem(text));
                    result.forEach(item=>{
                        if(item.value === this.input){
                            return;
                        }
                    })
                    //result存放历史记录的数组 只存5条，如果已经有五条数据，则删除一条再添加
                    if(JSON.parse(localStorage.getItem(text)).length >= 5) {
                    let arr = JSON.parse(localStorage.getItem(text))
                    arr.pop()
                    localStorage.setItem(text, JSON.stringify(arr))
                    }
                    let newHistory = [{value:this.input}]
                    localStorage.setItem(text, JSON.stringify(newHistory.concat(JSON.parse(localStorage.getItem(text)))))
                }
                else {  // 首次创建
                    let result = [{value:this.input}]
                    localStorage.setItem(text, JSON.stringify(result))
                }
            })
        },
        /**点击了某个搜索记录 */
        handleSelect(item){
            this.input = item.value;
            this.searchData();
        },
        /**显示搜索历史记录 */
        querySearch(queryString, cb){
            cb(JSON.parse(localStorage.getItem('historySearch')))
        }
    }
}
</script>